<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/tooltip.js"></script>
  </head>
  <body>
    <h3>Tooltip弹出提示</h3>

    <h4>基本实例</h4>
    <section>
        <div class="example">
            <button class="btn-outline btn-primary btn-medium" data-tooltip="向上的消息提示">向上</button>
            <button class="btn-outline btn-primary btn-medium" data-tooltip="向下的消息提示" data-position="bottom">向下</button>
            <button class="btn-outline btn-primary btn-medium" data-tooltip="向左的消息提示" data-position="left">向左</button>
            <button class="btn-outline btn-primary btn-medium" data-tooltip="向右的消息提示" data-position="right">向右</button>
        </div>
        <pre class="html"><code>
    &lt;button class="btn-light btn-primary btn-medium" data-tooltip="向上的消息提示"&gt;向上&lt;/button&gt;
    &lt;button class="btn-light btn-primary btn-medium" data-tooltip="向下的消息提示" data-position="bottom"&gt;向下&lt;/button&gt;
    &lt;button class="btn-light btn-primary btn-medium" data-tooltip="向左的消息提示" data-position="left"&gt;向左&lt;/button&gt;
    &lt;button class="btn-light btn-primary btn-medium" data-tooltip="向右的消息提示" data-position="right"&gt;向右&lt;/button&gt;
        </code></pre>
    </section>

    <h4>通过Javascript初始化</h4>
    <section>
        <div class="example">
            <p>Tooltip是自动初始化的，如果你动态创建元素，就需要使用Javascript初始化：</p>
        </div>
        <pre><code>
    $('.tooltip').tooltip();
        </code></pre>
    </section>

    <script>
        $(document).ready(function() {
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>
  </body>
</html>